{% extends 'core/base.html' %}

{% block title %}Items{% endblock %}

{% block content %}
    <div class="pb-6 grid grid-cols-4 gap-4 bg-gray-100">
        <div class="col-span-1">
            <form method="get" action="{% url 'item:items' %}">
                <input name="query" class="w-full py-4 px-6 border rounded-xl" type="text" value="{{ query }}" placeholder="Find a product...">

                <button class="mt-2 py-4 px-8 text-lg bg-teal-500 text-white rounded-xl">Search</button>
            </form>

            <hr class="my-6">

            <p class="font-semibold">Categories</p>

            <ul>
                {% for category in categories %}
                    <li class="py-2 px-2 rounded-xl{% if category.id == category_id %} bg-gray-200{% endif %}">
                        <a href="{% url 'item:items' %}?query={{ query }}&category={{ category.id }}">{{ category.name }}</a>
                    </li>
                {% endfor %}
            </ul>

            <hr class="my-6">

            <p class="font-semibold">Clear filters</p>

            <ul>
                <li><a href="{% url 'item:items' %}" class="mt-2 py-4 px-8 inline-block bg-yellow-500 text-lg rounded-xl text-white">Clear</a>
        </div>

        <div class="col-span-3">
            <div class="grid grid-cols-3 gap-3">
                {% for item in items %}
                    <div>
                        <a href="{% url 'item:detail' item.id %}">
                            <div>
                                <img src="{{ item.image.url }}" class="rounded-t-xl">
                            </div>
    
                            <div class="p-6 bg-white rounded-b-xl">
                                <h2 class="text-2xl">{{ item.name }}</h2>
                                <p class="text-gray-500">Price: {{ item.price }}</p>
                            </div>
                        </a>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}